import React,{useState,useEffect} from 'react'

//自定义 hooks：函数名用use开头
const useRequset = (url) => {
    const[topic,setTopic]=useState([]);
    const[tab,setTab]=useState('all');       //有好多属性，放个对象。 "":  
    useEffect( ()=>{
        fetch(url+'?tab=' + tab + '&page=' + 2)     
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                setTopic(res.data);
            })
    },[tab])  //[]中是函数依赖，函数依赖发生改变则函数重新执行
    return [topic,setTab]
}

const Hook = () => {
    const [topics, setTab] = useRequset('https://cnodejs.org/api/v1/topics')
    return(
        <div>
            <header>
                <button onClick={()=>setTab('all')}>全部</button>
                <button onClick={()=>setTab('good')}>精华</button>
                <button onClick={()=>setTab('ashare')}>分享</button>
            </header>
            {
                topics.map(item => <li key={item.id}>{item.title}</li>)
            }
        </div>
    )
}

export default Hook;
